<template>
  <div style="height: 200px">
    <a-table
      :dataSource="dataSource"
      :columns="columns"
      v-model:pagination="pagination"
      @change="onChange"
      :loading="loading"
    />
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import ATable from '@/components/table.vue'
import usePaginationStandard from '@/hooks/usePaginationStandard.js'
/**
 * 表头
 */
let columns = ref([
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    width: 100,
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    width: 100,
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
    width: 100,
  },
])
/**
 * 数据
 */
let dataSource = ref([
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
])

/**
 * 接口模拟
 */
function mockApi() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ current: 3, pageSize: 10, total: 380 })
    }, 1000)
  })
}

/**
 * table查询逻辑
 */
//分页规范化hook
let { call, pagination, loading } = usePaginationStandard(async query => {
  try {
    let { current, pageSize, total } = await mockApi(query)
    return { current, pageSize, total }
  } catch (e) {
    message.error('列表加载失败')
  }
})
//其他条件
let otherQuery = { query1: 1, query2: 2 }
//table组件翻页事件，调用hooks
function onChange({ current, pageSize }) {
  call({ current, pageSize, ...otherQuery })
}
//初始化调用
onMounted(() => {
  call({ current: 1, pageSize: 10, ...otherQuery })
})
</script>
